<template>
<div class="fullBox">
      <div class="timeBox">
        <div  :class="['iconfont num',`icon-num-${minute.charAt(0)}`]"></div>
        <div   :class="['iconfont num',`icon-num-${minute.charAt(1)}`]"></div>
        <div class="iconfont icon-num-dot dot"></div>
        <div   :class="['iconfont num',`icon-num-${second.charAt(0)}`]"></div>
        <div   :class="['iconfont num',`icon-num-${second.charAt(1)}`]"></div>
        <div class="iconfont icon-num-dot dot"></div>
        <div   :class="['iconfont num',`icon-num-${millisecond.charAt(0)}`]"></div>
        <div   :class="['iconfont num',`icon-num-${millisecond.charAt(1)}`]"></div>
      </div>
    </div>
      <div class="btns" v-if="type=='stopwatch'">
         <div class="btn btn-block" @click="handleClick">{{ start?'结束':'开始'}}</div>
      </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import {  timerProps } from './timer'

defineOptions({ 
    name:'Timer'
})

const props = defineProps(timerProps)

const { type } = toRefs(props)


let timer: number | null

let initial = ref()
let start=ref(false)

let millisecond = ref('00')
let second = ref('00')
let minute = ref('00')
const handleClick = () => {
    if (!timer) {
        start.value=true
        initial.value = new Date().getTime()
        updateTimer()
        timer = window.setInterval(() => {
            updateTimer()
        }, 120)
    } else {
        start.value=false
        window.clearInterval(timer)
        timer = null // 必须
        minute.value= second.value= millisecond.value='00'
    }
}

onMounted(() => { 
    if (type.value=== 'clock') { 
        if (!timer) { 
            start.value=true
            updateTimer()
            timer = window.setInterval(() => {
                updateTimer()
            }, 1000)
        }
    }
})

onBeforeUnmount(() => { 
    if (type.value === 'clock') {
        if (timer) {
            start.value = false
            window.clearInterval(timer)
            timer = null  
            minute.value = second.value = millisecond.value = '00'
        }
    }
})

const formatNum = (num:number) => { 
    return num.toString().padStart(2, '0')
}
const updateTimer = () => {
    if (type.value == 'clock') {
        let now=new Date()
        minute.value = formatNum(now.getHours())
        second.value = formatNum( now.getMinutes())
        millisecond.value= formatNum(now.getSeconds())
    } else { 
        let distance = new Date().getTime() - initial.value
        minute.value = formatNum(Math.floor(distance / 1000 / 60)) // 1 分钟数 = 60 000 毫秒
        second.value = formatNum( Math.floor((distance % 60000) / 1000)) // 秒数
        millisecond.value= formatNum(Math.floor((distance % 1000) / 10)) // 毫秒数
    }
  
}
</script>
<style scoped>
.fullBox {
  align-items: center;
  display: flex;
  justify-content: center;
}
.timeBox {
  align-items: center;
  background: #000;
  border-radius: 16px;
  color: #fff;
  display: flex;
  margin: 32px;
  padding: 32px;
}
.timeBox .num {
  font-size: 80px;
}
.timeBox .dot {
  font-size: 60px;
}

.btn,
.btns {
  align-items: center;

  display: flex;
  justify-content: center;
}
.btn {
  background: #4285f4;
  border: 1px solid #4285f4;
  border-radius: 4px;
  color: #fff;
  font-size: 28px;
  height: 72px;
  width: 160px;
}
.btn-block {
  border-radius: 48px;
  font-size: 40px;
  height: 96px;
  margin-bottom: 48px;
  width: 480px;
}

</style>